<template>
  <div class="register">
    <div class="container">
      <h1><img src="http://www.yhachina.com/images/logo.png" alt="" /></h1>
      <div class="content">
        <h2>
          <span
            >欢迎注册YHA
            <p>®</p>
            青年旅舍
            <p>®</p></span
          >
        </h2>
        <div class="demo-input-suffix">
          <el-form :rules="rules" ref="form" :model="form" label-width="60px">
            <el-form-item prop="email">
              <el-input placeholder="电子邮箱(必填)" v-model="form.email">
                <i slot="prefix" class="el-input__icon el-icon-message"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="pwd1">
              <el-input
                placeholder="密码(6~16位英文数字)"
                v-model="form.pwd1"
                show-password
              >
                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="pwd2">
              <el-input
                placeholder="确认密码"
                v-model="form.pwd2"
                show-password
              >
                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input placeholder="手机号码(必填)" v-model="form.phone">
                <i slot="prefix" class="el-input__icon el-icon-mobile"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="yzm">
              <el-input
                placeholder="验证码"
                v-model="form.yzm"
                style="width: 300px; float: left"
              >
                <i slot="prefix" class="el-input__icon el-icon-chat-round"></i>
              </el-input>
              <div
                :style="`width:${width};height:${height};float:right`"
                class="yzm"
                @click="refreshCode"
              >
                <span v-for="(item, index) in codeList" :key="index">{{
                  item.code
                }}</span>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <el-checkbox-group v-model="checkList">
          <el-checkbox
            label="申请会员卡服务 拥有会员卡可以以更优惠的会员价预订旅舍服务"
          ></el-checkbox>
          <el-checkbox
            label="我已阅读并同意 《青年旅舍®用户注册协议》"
          ></el-checkbox>
        </el-checkbox-group>

        <el-button type="success" round size="medium" @click="submit"
          >注册</el-button
        >

        <router-link to="/login"><p>我已有账号，返回登录</p></router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "100px",
    },
    height: {
      type: String,
      default: "40px",
    },
    length: {
      type: Number,
      default: 4,
    },
  },
  data() {
    return {
      codeList: "",
      form: {
        email: "",
        pwd1: "",
        pwd2: "",
        phone: "",
        yzm: "",
      },
      rules: {
        email: [
          { required: true, message: "电子邮箱必填", trigger: "blur" },
          {
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱格式错误",
            trigger: "blur",
          },
        ],
        pwd1: [
          { required: true, message: "密码必填", trigger: "blur" },
          { pattern: /^\d{6}$/, message: "密码需6位数字", trigger: "blur" },
        ],
        pwd2: [
          {
            validator: (rule, value, callback) => {
              if (value == this.form.pwd1) {
                callback()
              } else {
                callback(new Error("两次密码输入不一致"))
              }
            },
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "手机号必填", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        yzm: [{ required: true, message: "验证码必填", trigger: "blur" }],
      },
      checkList: ["选中且禁用", "复选框 A"],
    }
  },
  mounted() {
    this.createdCode()
  },
  methods: {
    submit() {
      // console.log(this.form.yzm);
      let codeyzm = ""
      this.codeList.forEach(item => {
        codeyzm += item.code
      })
      console.log(codeyzm.toLowerCase())
      console.log(this.form.yzm)

      if (this.form.yzm != codeyzm.toLowerCase()) {
        this.$message({ type: "fail", message: "验证码错误" })
        this.form.yzm = ""
        this.createdCode()
        return
      } else {
        this.$message.success("验证码正确")
        console.log(this.form)
        let url = "http://localhost:3000/v2/qnls/user"
        var params = `email=${this.form.email}&pwd1=${this.form.pwd1}&pwd2=${this.form.pwd2}&phone=${this.form.phone}&yzm=${this.form.yzm}`
        this.axios.post(url, params).then(res => {
          console.log(res)
          if (res.data.code == 200) {
            console.log("注册成功")
            this.$router.push("/login")
          } else {
            this.$message(res.data.msg)
            this.form.phone = ""
            this.form.pwd1 = ""
            this.form.pwd2 = ""
            this.form.email = ""
            this.form.yzm = ""
            this.createdCode()
          }
        })
        // this.$router.push('/login')
      }
    },
    refreshCode() {
      this.createdCode()
    },
    createdCode() {
      const len = this.length
      const codeList = []
      const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789"
      const charsLen = chars.length // 生成
      for (let i = 0; i < len; i++) {
        const rgb = [
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 240),
          Math.round(Math.random() * 200),
        ]
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          fontSize: `1${[Math.floor(Math.random() * 5) + 5]}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${
            Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)
          }deg)`,
        })
      } // 指向
      this.codeList = codeList // 将当前数据派发出去
      this.$emit("update:value", codeList.map(item => item.code).join(""))
    },
  },
}
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(http://www.yhachina.com/images/login-registration/registration-bg.jpg)
    no-repeat center;
  background-size: cover;
}
.register .container {
  padding: 30px 0 10px 0;
  width: 540px;
  margin: 0 auto;
  text-align: center;
}
.register .container .content {
  background-color: #f4fbff;
  height: 515px;
  margin-top: 30px;
  // margin: 30px;
  border-radius: 8px;
}
.register .container .content h2 {
  height: 58px;
  line-height: 58px;
  font-size: 24px;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;
}
.register .container .content h2 span {
  border-bottom: 3px solid #87c524;
}
.register .container .content h2 span p {
  vertical-align: super;
  display: inline-block;
  font-size: 12px;
}

.el-form-item {
  width: 480px;
  margin: 15px 0;
}
.el-checkbox-group {
  margin: 0 0 0 60px;
}
.el-checkbox {
  margin: 10px 0 5px 0;
  float: left;
}
.el-button {
  width: 400px;
  height: 50px;
  margin-top: 10px;
}
p {
  height: 50px;
  display: flex;
  justify-content: end;
  align-items: center;
  font-size: 12px;
  margin-right: 30px;
}
.yzm {
  background-color: #87c524;
  border-radius: 20px;
  color: #fff;
  font-size: 16px;
}
.yzm span {
  color: #fff;
  display: inline-block;
}
</style>
